<template>
<div >
   <el-col :span="6" class="container-system">
    <el-col :span="24"  >
        <div class="org-tree-manage">
          <p class="department-manage">部门管理</p>
          <OrgTree  :showCheckbox="false" :showOperateBtn="true"  
           />
        </div>
    </el-col>
  </el-col>
  <el-col :span="17" class="container-system manage-system">
        <p class="department-manage">职位管理</p>
         
          <TableAndButton
              :key="tableKey"
              list-loading="listLoading"
              :table-data="list"
              sort-change="sortChange"
              show-reviewer="false"
              :column-data="data.tableColumn"
              :operateButton="false"
            />
          <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getDepartmentList" />  
    
  </el-col>
  
</div>
</template>

<script>
import OrgTree from '@/components/orgTree'

import TableAndButton from '@/components/TableAndButton'
import Pagination from '@/components/Pagination' 
import data from './const'
import {fetchDepartmentList} from '@/api/system'
import { mapState, mapMutations } from "vuex";
export default {
  components:{OrgTree,TableAndButton,Pagination},
  data(){
    return {
      tableKey:2,
      dialogVisible:false,
       data,
    list:[],
    total:1,
    listQuery: {
        page: 1,
        limit: 20,
        importance: undefined,
        title: undefined,
        type: undefined,
        sort: '+id',
        date: undefined,
        startDate: undefined,
        endDate: undefined
      },
      orgData:[]
    }
   
  },
  created(){
   //this.getDepartmentList()
   this.$store.dispatch("app/getCodeList", ["department"]); //code转码
  
  },
    computed: {
    ...mapState(["system","app"]),
  },
  methods:{
    getDepartmentList(args){
      fetchDepartmentList(args).then(response => {
        this.list = response.data.items
        this.total = response.data.total
        this.listLoading = false
        // Just to simulate the time of the request
      })
    },
    
   
   

  } 

}
</script>

<style lang="scss">
.container-system{
  background: #fff;
  padding:0 20px;
.department-manage{
  padding:20px 0;
  border-bottom: 2px solid #eee;
}
.el-tree{
    background: white;
}
}
.manage-system{
  padding:0 20px;
  margin-left:20px;
}

</style>